---
title: Aside
description: Usage instructions for the Aside component
---

<PageDescription>

The `<Aside>` component is a wrapper component that adds styling to make the
text display smaller than the default body text; using `body-long-01` and adds
the correct top border styles.

It should only be used within a `<Column>` component with specific parameters.
`<Column colMd={2} colLg={3} offsetMd={1} offsetLg={1}>`

</PageDescription>

<InlineNotification kind="warning">

**Warning:** If you use more than one `<Aside>` component on a single page, you
need to provide an accessibility label so that someone using assistive
technology can quickly understand the purpose of the landmark. See
[Mozilla Developer Network’s documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Complementary_role#Labeling_landmarks)
for more information. Props for accessibility labels are described in the
[Props section](#props) below.

</InlineNotification>

## Example

<Title>With hanging rule</Title>

<Row>
<Column colMd={5} colLg={8}>

It is more important than ever that we own our own ethos, make palpable our
brand values, and incorporate an instantly identifiable IBMness in everything we
do.

> Without aesthetic, design is either the humdrum repetition of familiar clichés
> or a wild scramble for novelty. Without aesthetic, the computer is but a
> mindless speed machine, producing effects without substance, form without
> relevant content, or content without meaningful form.
>
> <cite>– Paul Rand</cite>

Aesthetic is defined as the philosophical theory or set of principles governing
outward appearance or actions.

</Column>
<Column colMd={2} colLg={3} offsetMd={1} offsetLg={1}>
<Aside aria-label="Example aside">

**Good design is always good design.**

What we borrow from our own design history is not a mid-century aesthetic in
stylistic terms, but the modernist attitudes and approach used at the time.

</Aside>
</Column>
</Row>

<Title>Without hanging rule</Title>

<Row>
<Column colMd={5} colLg={8}>

Like our brand values, our design ethos must be palpable in everything we
produce. Our philosophy and principles are for designers and non-designers
alike–anyone authoring or authorizing any form of design on behalf of IBM.

They provide clear criteria for the conception, creativity and craftsmanship our
brand demands and our clients deserve. The expression of our philosophy may
evolve and expand over time, but our principles are designed to endure, ensuring
everything IBM is distinctly IBM.

</Column>
<Column colMd={2} colLg={3} offsetMd={1} offsetLg={1}>
<Aside aria-label="Example aside" hideRule>

A by-product of every experience with IBM should be time—time saved or time
well-spent.

</Aside>
</Column>
</Row>

## Code

<Title>With hanging rule</Title>

```mdx path=components/Aside/Aside.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/Aside
<Column colMd={2} colLg={3} offsetMd={1} offsetLg={1}>
  <Aside>

**Good design is always good design.** What we borrow from our own design
history is not a mid-century aesthetic in stylistic terms, but the modernist
attitudes and approach used at the time.

  </Aside>
</Column>
```

<Title>Without hanging rule</Title>

```mdx path=components/Aside/Aside.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/Aside
<Column colMd={2} colLg={3} offsetMd={1} offsetLg={1} hideRule>
  <Aside>

A by-product of every experience with IBM should be time—time saved or time
well-spent.

  </Aside>
</Column>
```

### Props

| property        | propType | required | default | description                                                                                                                       |
| --------------- | -------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- |
| aria-label      | string   |          |         | Specify an `aria-label` value to provide a label to the inner aside element.                                                      |
| aria-labelledBy | string   |          |         | Specify an `aria-labelledby` value that references the id of an existing element to serve as a label for the inner aside element. |
| children        | node     |          |         |                                                                                                                                   |
| className       | string   |          |         | Add custom class name                                                                                                             |
| hideRule        | bool     |          |         | Hide the hanging rule                                                                                                             |
